@gridstack-columns: 12;
@horizontal_padding: 20px;
@vertical_padding: 20px;
@animation_speed: .3s;

@background: #232323;

.vendor(@property; @value){
    -webkit-@{property}: @value;
       -moz-@{property}: @value;
        -ms-@{property}: @value;
         -o-@{property}: @value;
            @{property}: @value;
}

.generate-columns(@i: 1) when (@i <= @gridstack-columns) {
    &[data-gs-width='@{i}'] { width: (100% / @gridstack-columns) * @i; }
    &[data-gs-x='@{i}'] { left: (100% / @gridstack-columns) * @i; }
    &[data-gs-min-width='@{i}'] { min-width: (100% / @gridstack-columns) * @i; }
    &[data-gs-max-width='@{i}'] { max-width: (100% / @gridstack-columns) * @i; }

    .generate-columns((@i + 1));
}

:root .grid-stack-item > .ui-resizable-handle { filter: none; }

.grid-stack {
    position: relative;

    &.grid-stack-rtl {
        direction: ltr;

        > .grid-stack-item {
            direction: rtl;
        }
    }

    .grid-stack-placeholder > .placeholder-content {
        border: 1px dashed lightgray;
        margin: 0;
        position: absolute;
        top: 0;
        left: @horizontal_padding / 2;
        right: @horizontal_padding / 2;
        bottom: 0;
        width: auto;
        z-index: 0 !important;
        text-align: center;
    }

    > .grid-stack-item {
        min-width: 100% / @gridstack-columns;
        position: absolute;
        padding: 0;

        > .grid-stack-item-content {
            margin: 0;
            position: absolute;
            top: 0;
            left: @horizontal_padding / 2;
            right: @horizontal_padding / 2;
            bottom: 0;
            width: auto;
            z-index: 0 !important;
            overflow-x: hidden;
            overflow-y: auto;
        }

        > .ui-resizable-handle {
            position: absolute;
            font-size: 0.1px;
            display: block;
            -ms-touch-action: none;
            touch-action: none;
        }

        &.ui-resizable-disabled > .ui-resizable-handle,
        &.ui-resizable-autohide > .ui-resizable-handle { display: none; }

        &.ui-draggable-dragging,
        &.ui-resizable-resizing {
            z-index: 100;

            > .grid-stack-item-content,
            > .grid-stack-item-content {
                box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
                opacity: 0.8;
            }
        }

        > .ui-resizable-se,
        > .ui-resizable-sw {
            background-image: url();
            background-repeat: no-repeat;
            background-position: center;
            .vendor(transform, rotate(45deg));
        }

        > .ui-resizable-se {
            .vendor(transform, rotate(-45deg));
        }


        > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
        > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
        > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
        > .ui-resizable-e  { cursor: e-resize;  width: 10px; right: @horizontal_padding / 2; top: 15px; bottom: 15px; }
        > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
        > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
        > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
        > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: @horizontal_padding / 2; top: 15px; bottom: 15px; }

        &.ui-draggable-dragging {
            &> .ui-resizable-handle {
                display: none !important;
            }
        }

        .generate-columns();
    }

    &.grid-stack-animate,
    &.grid-stack-animate .grid-stack-item {
        .vendor(transition, left @animation_speed);
        .vendor(transition, top @animation_speed);
        .vendor(transition, height @animation_speed);
        .vendor(transition, width @animation_speed);
    }

    &.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
    &.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
    &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
        .vendor(transition, left .0s);
        .vendor(transition, top .0s);
        .vendor(transition, height .0s);
        .vendor(transition, width .0s);
    }
    
	&.grid-stack-one-column-mode {
		height: auto !important;
		&> .grid-stack-item {
	        position: relative !important;
	        width: auto !important;
	        left: 0 !important;
	        top: auto !important;
	        margin-bottom: @vertical_padding;
	        max-width: none !important;

	        &> .ui-resizable-handle { display: none; }
		}
	}
}

.wrapper {
    display: flex;
}
.sidebar {
    width: 100%;
    background: transparent ;
    text-align: center;
    color: #80868e;

    > ul {
        list-style-type: none;
        text-align: left;
        margin: 0;
        padding: 0;

        li {
            border-bottom: 1px solid lighten(@background, 5%);
            background: lighten(@background, 10%);
            text-transform: capitalize;
            transition: background 0.25s ease-in-out;

            &:hover {
                background: darken(@background, 5%);
            }
            &:last-child {
                border-bottom: none;
            }
        }
        a {
            display: block;
            padding: 1rem;
            color: #80868e;
            cursor: pointer;
            transition: background 0.25s ease-in-out;

            &.added {
                font-style: italic;
                color: darken(#000000, 30%);
                background: darken(#80868e, 5%);
            }
        }
    }
}
.header {
    min-height: 20vh;
}
.gui-view {
    width: 70%;
    background-image: url('@{dash-image-path}bg-forest.jpg');

    .grid-stack-item-content {
        .widget-body-config {
            display: block;
            border: none;
            background: none;
            text-transform: capitalize;
        }
    }
}

.gui-view-dash{
    width: 100%;
    background-image: url('@{dash-image-path}bg-forest.jpg');

    .grid-stack-item-content {

    }

}

.flat {
    width: 240px;
    height: 120px;
    max-width: 240px;
    max-height: 120px;
    min-width: 120px;
    min-height: 120px;
    font-size: 18px !important;
    border-radius: 15px;
    border: none;
    background-color: lighten(#80868e,30%);
    align-content: center;
    text-align: center;
    text-decoration: none;
    margin: 2px 16px;
    margin-bottom: 10px!important;
    margin-top: 10px!important;
    margin-right: 10px!important;
    margin-left: 10px!important;
    cursor: pointer;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    box-shadow: 0 2px 4px darkgrey;
    padding-bottom: 10px;
    padding-top: 10px;
}

.flat:focus {
    outline: none !important;
}

.flat:hover {
    background: #80868e !important;
    box-shadow: none !important;
    font-size: 17px !important;
    color: whitesmoke;
}
